<template>
  <el-container>
    <el-row class="login_main">
      <el-col>
        <header class="header">
          <div class="header-top">
            <h2>欢迎使用鲤鱼科技</h2>
            <p>登录您的账号</p>
            <el-avatar :size="70" :src="userImg"></el-avatar>
          </div>
        </header>
      </el-col>
      <el-col>
        <el-tabs v-model="activeName">
          <el-tab-pane label="登录" name="login">
            <!-- 登录表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              label-position="top"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input v-model.trim="ruleForm.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="loginPassword">
                <el-input
                  v-model.trim="ruleForm.loginPassword"
                  type="password"
                ></el-input>
              </el-form-item>
              <div class="re-bt">
                <el-checkbox v-model="remember" label="记住密码"></el-checkbox>

                <el-form-item>
                  <el-button
                    type="primary"
                    native-type="submit"
                    @keydown.enter="onSubmit"
                    @click.prevent="onSubmit"
                  >
                    登录
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
            <!-- /登录表单 -->
          </el-tab-pane>
          <el-tab-pane label="注册" name="register">
            <!-- 注册表单 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              label-position="top"
            >
              <el-form-item label="邮箱" prop="registerEmail">
                <el-input v-model="ruleForm.registerEmail"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="registerPassword">
                <el-input v-model="ruleForm.registerPassword" type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="ruleForm.confirmPassword" type="password"></el-input>
              </el-form-item>
              <div class="re-bt">
                <el-checkbox v-model="agree" id="agree"></el-checkbox>
                <label for="agree">
                  我已阅读并同意
                  <el-link>服务条款</el-link>
                  和
                  <el-link>隐私政策</el-link>
                </label>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitRegister">
                    立即注册
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
            <!-- /注册表单 -->
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import "../../assets/scss/login.scss";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      let reg = /^(?=.*\d)(?=.*[a-z])[a-zA-Z\d]{4,10}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (reg.test(value)) {
        if (this.ruleForm.confirmPassword !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      } else {
        callback(new Error("密码必须是由4-10位数字和字母组合"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.registerPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      userImg: require("../../assets/image/logo.png"),
      activeName: "login",
      remember: false,
      agree: false,

      ruleForm: {
        userName: localStorage.token,
        loginPassword: "",
        registerEmail: "",
        registerPassword: "",
        confirmPassword: "",
      },

      rules: {
        userName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],

        loginPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        registerEmail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],

        registerPassword: [{ validator: validatePass, trigger: "blur" }],
        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.ruleForm.userName != "鲤鱼乡") {
        this.$message.error("用户名不存在");
        false;
      } else if (
        this.ruleForm.userName === "鲤鱼乡" &&
        this.ruleForm.loginPassword === "123456"
      ) {
        localStorage.setItem("token", this.ruleForm.userName);
        this.$message({
          message: "登陆成功",
          type: "success",
        });
        this.$router.push("/home");
      } else {
        this.$message.error("登陆失败,密码不正确");
        false;
      }
    },
    onSubmitRegister() {
      console.log("register!");
    },
  },
};
</script>
